<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1"/>
	<title>Exifr orientation example</title>
	<link rel="stylesheet" type="text/css" href="../homepage/app.css">
	<style>
		table { 
			border-spacing: 8px;
			border-collapse: separate;
		}
		table,
		table tr,
		table td {
			text-align: center;
			vertical-align: middle;
			white-space: pre-wrap;
			margin: 0 !important;
			padding: 0 !important;
		}
		table tr td:first-child {
			min-width: 140px;
			max-width: 160px;
		}
		.name {
			font-size: 14px;
			margin: 2px 0;
			font-weight: 700;
		}
		.subtitle {
			font-size: 11px;
			margin: 2px 0;
			font-style: italic;
			opacity: 0.6;
		}
		.code {
			font-size: 10px;
		}
	</style>
</head>
<body>

	<p><strong>Warning:</strong> Some modern browsers automatically rotate images based on their exif. They're changing default value of the css property <code>image-orientation</code> from <code>'none'</code> to <code>'from-image'</code> on <code>&lt;img&gt;</code> elements and <code>background-image</code>. However they can also pass rotated photo to <code>&lt;canvas&gt;</code> through <code>ctx.drawImage()</code>. Though this behavior is quirky and differs from browser to browser, especially in Safari on iOs 13.4 and newer.</p>
	<p>Use <code>exifr.rotation()</code> if you want to manipulate the image and avoid afore mentioned problems.</p>
	<p>If <code>canvas</code> property is <code>true</code>, you need to rotate the image yourself in <code>&lt;canvas&gt;</code> using <code>ctx.rotate(...)</code>.</p>
	<p>If <code>css</code> property is <code>true</code>, you need to rotate the image yourself with CSS using <code>transform:rotate(...)</code>.</p>

	<table></table>

	<script src="../dist/mini.umd.js"></script>
	<script>

		let table = document.querySelector('table')

		function createElement(name) {
			return document.createElement(name)
		}

		function createRow(name, subtitle, array) {
			let tr = createElement('tr')
			let head = createElement('td')
			head.innerHTML = `<p class="name">${name}</p>`
			if (subtitle) head.innerHTML += `<p class="subtitle">${subtitle}</p>`
			tr.append(head)
			for (let item of array) {
				let td = createElement('td')
				td.append(item)
				tr.append(td)
			}
			table.append(tr)
		}

		function createImg(url) {
			let img = createElement('img')
			img.src = url
			return img
		}

		let urls = [
			'../test/fixtures/orientation/f1t.jpg',
			'../test/fixtures/orientation/f2t.jpg',
			'../test/fixtures/orientation/f3t.jpg',
			'../test/fixtures/orientation/f4t.jpg',
			'../test/fixtures/orientation/f5t.jpg',
			'../test/fixtures/orientation/f6t.jpg',
			'../test/fixtures/orientation/f7t.jpg',
			'../test/fixtures/orientation/f8t.jpg',
		]

		let rawTransforms = [
			{deg: 0, scaleX: 1, scaleY: 1},
			{deg: 0, scaleX: -1, scaleY: 1},
			{deg: 0, scaleX: -1, scaleY: -1},
			{deg: 0, scaleX: 1, scaleY: -1},
			{deg: 90, scaleX: 1, scaleY: -1},
			{deg: 90, scaleX: -1, scaleY: -1},
			{deg: 90, scaleX: -1, scaleY: 1},
			{deg: 90, scaleX: 1, scaleY: 1},
		]


		;(async function() {
			let orientationsPromises = urls.map(exifr.orientation)
			let rotationsPromises    = urls.map(exifr.rotation)
			let orientations = await Promise.all(orientationsPromises)
			let rotations    = await Promise.all(rotationsPromises)
			let images = urls.map(createImg)
			await Promise.all(images.map(img => new Promise(resolve => img.onload = resolve)))
			let raw      = rawTransforms.map(rot => createRaw(urls[0], rot))
			let rotated1 = images.map((img, i) => createRotatedCanvas(img, rotations[i]))
			let rotated2 = urls.map((url, i) => createRotatedImg(url, rotations[i]))
			createRow('orientation', 'standardized EXIF number', orientations)
			createRow('raw image', 'The way it looks in basic photo viewers or old browsers.', raw)
			createRow('unmodified &lt;img&gt;', 'The way browser renders it. May be autorotated in modern browsers.', images)
			createRow('rotated &lt;canvas&gt;', 'Using <code>ctx.rotate()</code> with <code>ctx.drawImage()</code> if <code>rotation.canvas===true</code>', rotated1)
			createRow('rotated with css', 'Using property <code>transform:rotate()</code> if <code>rotation.css===true</code>', rotated2)
			createRow('exifr.rotation()', 'Output of exifr describing if and how rotation should be handled depending on current browser.', rotations.map(rot => {
				rot = JSON.parse(JSON.stringify(rot))
				rot.rad = Number(rot.rad.toFixed(3))
				let json = Object.entries(rot).map(([key, val]) => `${key}: ${val}`).join('\n')
				let div = document.createElement('div')
				div.style.textAlign = 'left'
				div.style.whiteSpace = 'pre-wrap'
				div.style.fontSize = '10px'
				div.innerHTML = json
				return div
			}))
		})();

		function createRaw(url, rot) {
			let img = createImg(url)
			img.style.transform = `rotate(${rot.deg}deg) scale(${rot.scaleX}, ${rot.scaleY})`
			return img
		}

		function createRotatedCanvas(img, rot) {
			let w = img.width
			let h = img.height
			// only swap width and height if the image is rotated 90 or 270 degrees
			// and if the browser doesn't do autorotation already
			if (rot.canvas && rot.dimensionSwapped) {
				w = img.height
				h = img.width
			}
			let canvas = document.createElement('canvas')
			canvas.width = w
			canvas.height = h
			let ctx = canvas.getContext('2d')
			// only rotate the image using canvas if browser doesn't do autorotation already
			if (rot.canvas) {
				ctx.translate(w / 2, h / 2)
				ctx.rotate(rot.rad)
				ctx.scale(rot.scaleX, rot.scaleY)
				ctx.drawImage(img, -img.width / 2, -img.height / 2, img.width, img.height)
			} else {
				ctx.drawImage(img, 0, 0)
			}
			return canvas
		}

		function createRotatedImg(url, rot) {
			let img = createImg(url)
			// only rotate the image using css if browser doesn't do autorotation already
			if (rot.css) img.style.transform = `rotate(${rot.deg}deg) scale(${rot.scaleX}, ${rot.scaleY})`
			return img
		}

	</script>

</body>
</html>